<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web防火墙 - 实时日志监控</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header>
            <div class="logo">
                <div class="logo-icon">🛡️</div>
                <div class="logo-text">
                    <h1>Web防火墙监控系统</h1>
                    <p>实时HTTP请求日志监控</p>
                </div>
            </div>
            <div class="status">
                <div class="status-indicator"></div>
                <span class="status-text">正在连接...</span>
            </div>
        </header>
        
        <div class="dashboard">
            <div class="card stat-card">
                <h2>总请求数</h2>
                <div class="value" id="total-requests">0</div>
            </div>
            <div class="card stat-card">
                <h2>拦截请求数</h2>
                <div class="value" id="blocked-requests">0</div>
            </div>
            <div class="card stat-card">
                <h2>在线客户端</h2>
                <div class="value" id="active-clients">0</div>
            </div>
        </div>
        
        <div class="filters">
            <div class="filter">
                <label for="method-filter">HTTP方法</label>
                <select id="method-filter">
                    <option value="all">全部方法</option>
                    <option value="GET">GET</option>
                    <option value="POST">POST</option>
                    <option value="PUT">PUT</option>
                    <option value="DELETE">DELETE</option>
                </select>
            </div>
            <div class="filter">
                <label for="status-filter">状态码</label>
                <select id="status-filter">
                    <option value="all">全部状态</option>
                    <option value="200">200 OK</option>
                    <option value="404">404 Not Found</option>
                    <option value="500">500 Server Error</option>
                    <option value="blocked">已拦截</option>
                </select>
            </div>
            <div class="filter">
                <label for="ip-filter">客户端IP</label>
                <input type="text" id="ip-filter" placeholder="输入IP地址过滤...">
            </div>
        </div>
        
        <div class="search-bar">
            <input type="text" id="search-input" placeholder="搜索请求URI...">
            <button id="search-btn">搜索</button>
        </div>
        
        <div class="logs-container">
            <div class="logs-header">
                <div>客户端IP</div>
                <div>方法</div>
                <div>URL</div>
                <div>状态</div>
                <div>端口</div>
                <div>时间戳</div>
            </div>
            <div class="logs-list" id="logs-list">
                <div class="no-logs">正在等待日志数据...</div>
            </div>
        </div>

        <div class="card firewall-config">
        <h2>防火墙配置</h2>
        <div class="config-section">
            <h3>端口过滤</h3>
            <div class="input-group">
                <label for="blocked-ports">拦截端口:</label>
                <input type="text" id="blocked-ports" placeholder="80,443,8080">
                <button id="update-ports">更新</button>
            </div>
        </div>
        
        <div class="config-section">
            <h3>SYN洪水防御</h3>
            <div class="input-group">
                <label for="syn-threshold">SYN阈值(每秒):</label>
                <input type="number" id="syn-threshold" min="10" max="1000" value="50">
            </div>
            <div class="input-group">
                <label for="ban-time">封禁时间(秒):</label>
                <input type="number" id="ban-time" min="10" max="3600" value="60">
            </div>
        </div>
        
        <div class="config-section">
            <h3>慢速DoS防御</h3>
            <div class="input-group">
                <label for="slow-timeout">超时时间(秒):</label>
                <input type="number" id="slow-timeout" min="5" max="60" value="10">
            </div>
            <div class="input-group">
                <label for="min-rate">最小速率(B/s):</label>
                <input type="number" id="min-rate" min="10" max="10000" value="100">
            </div>
        </div>
        
            <button id="update-firewall">更新防火墙配置</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>